<template>
    <div>
        <el-select v-model="value" placeholder="请选择" style="height: 50px">
            <el-option
                    v-for="item in ruleForm"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id">
            </el-option>
        </el-select>
    <el-form style="width: 60%" :model="MajorForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
        <el-form-item label="学院ID" prop="collegeId">
            <el-input v-model="value" readOnly></el-input>
        </el-form-item>
        <el-form-item label="ID" prop="id">
            <el-input v-model="MajorForm.id"></el-input>
        </el-form-item>
        <el-form-item label="部门名称" prop="name">
            <el-input v-model="MajorForm.name"></el-input>
        </el-form-item>

        <el-form-item>
            <el-button type="primary" @click="submitForm('ruleForm')">立即创建</el-button>
            <el-button @click="resetForm('ruleForm')">重置</el-button>
            <el-button @click="back()">返回</el-button>
        </el-form-item>
    </el-form>
    </div>
</template>

<script>
    export default {
        name: "AddTMajor",
        created(){
            this.findCollegeName()
        },
        data(){
            return{
                ruleForm:{
                    name: '',
                    id: ''
                },
                MajorForm:{
                    id:'',
                    name:'',
                    collegeId:'3'
                },
                value:'',
                rules:{
                    name: [
                        { required: true, message: '部门名称不能为空', trigger: 'blur' },],
                    id:[
                        { required: true, message: 'id不能为空', trigger: 'blur' },
                    ],
                    collegeId: [
                        {required:true,message:'学院id不能为空',trigger:'blur'}
                    ]
                }
            };
        },
        methods:{

            back(){
                this.$router.push("/QueryTMajor")
            },

            findCollegeName(){
                const _this=this
                axios.get('http://localhost:8181/teacher/f1').then(function (resp) {
                    _this.ruleForm=resp.data
                    console.log(_this.ruleForm)
                })
            },
            submitForm(formName) {
                const _this=this
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        this.MajorForm.collegeId=this.value
                        console.log(this.MajorForm)
                        axios.post('http://localhost:8181/teacher/addMajor',this.MajorForm).then(function(resp) {
                            if (resp.data==='添加成功'){
                                _this.$alert('部门: '+_this.MajorForm.name+' 添加成功!', '消息', {
                                    confirmButtonText: '确定',
                                    callback: action => {
                                        _this.$router.push("/QueryTMajor")
                                    }
                                });
                            }
                            else{
                                _this.$alert('部门: '+_this.MajorForm.name+' 添加失败! 请检查是否重复添加 错误码: '+resp.data,'消息',{
                                    confirmButtonText:'确定',
                                    callback:action => {
                                        _this.$router.push("/QueryTMajor")
                                    }
                                });
                            }
                        })
                    } else {
                        return false;
                    }
                });
            },
            resetForm(formName) {
                this.$refs[formName].resetFields();
            }
        }

    }
</script>
